<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
  <!-- 引入样式文件 -->
  <!--<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@3.6.10/lib/index.css" />-->

  <link rel="stylesheet" href="/waphome/css/vant.css">
  <link rel="stylesheet" href="/wapdetail/css/base.css">
  <link rel="stylesheet" href="/wapdetail/css/index.css">
  <link rel="stylesheet" href="/waphome/css/login.css">
  <link rel="stylesheet" href="/wapdetail/css/herder.css">
  <link rel="stylesheet" href="/wapdetail/css/home.css">
  <link rel="stylesheet" href="/wapdetail/css/worditem.css">
  <link rel="stylesheet" href="/waphome/css/iconfont.css">
  <link rel="stylesheet" href="/waphome/css/payCofirm.css">
  <link rel="stylesheet" href="/waphome/css/openvipDialog.css?v=4">
  <link rel="stylesheet" href="/waphome/css/el.css?v=1">
  <link rel="stylesheet" href="/waphome/css/CouponDialog.css">



  <link rel="stylesheet" href="/waphome/css/searchpoop.css">
  <link rel="stylesheet" href="/wapdetail/css/controact.css">
  <link rel="icon" href="/wapdetail/favicon.ico">
  <!-- JS -->
  <script src="/wapdetail/js/amfe-flexible.js"></script>
  <script src="/wapdetail/js/js-cookie.js"></script>
  <script src="/wapdetail/js/axios.js"></script>
  <script src="/wapdetail/js/service.js"></script>
  <script src="/wapdetail/js/swiper.js"></script>

  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <script src="/waphome/js/vue.js"></script>

  <script src="/waphome/js/vue-router.js"></script>

  <script src="/waphome/js/vant.js"></script>
  <script src="/waphome/js/el.js"></script>

  <meta data-vue-meta="ssr" name="keywords" content="{{$contract['title']}}">
  <meta data-vue-meta="ssr" name="description" content="{{$contract['meta']}}">
  <title>{{$contract['title']}}问合同</title>

  <script src="/home/js/CryptoJS.js"></script>



  <script>
    function envjudge() {
      const isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i) // 是否手机端
      const isWx = /micromessenger/i.test(navigator.userAgent) // 是否微信
      const isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
      const isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1
      const isComWx = /wxwork/i.test(navigator.userAgent) // 是否企业微信

      if (isComWx && isMobile) { // 手机端企业微信
        return 'com-wx-mobile'
      } else if (isComWx && !isMobile) { // PC端企业微信
        return 'com-wx-pc'
      } else if (isWx && isMobile) { // 手机端微信
        return 'wx-mobile'
      } else if (isWx && !isMobile) { // PC端微信
        return 'wx-pc'
      } else if (isMobile && isAndroid) {
        return 'Android-mobile'
      } else if (isMobile && isiOS) {
        return 'iOS'
      } else {
        return 'other'
      }
    }
    if (envjudge() === 'other') {

      // 跳转到移动
      window.location.href = `https://www.wenhetong.com/contractdetail/${location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')}.html`
    }
  </script>
</head>

<body>
  <!-- <script type="importmap">
  {
    "imports": {
      "vue": "https://fastly.jsdelivr.net/npm/vant@3.6.10/lib/vant.min.js"
    }
  }
</script> -->

  <div id="app">
    <!-- 顶部 -->
    <!-- 详情 -->
    <div class="contract_container">
      <!-- <Header /> -->
      <header-index @search-s-how="searchSHow = true"></header-index>

      <div class="hearder">
        <!-- <div class="back" @click="$router.back()">
         <i class="iconfont icon-fanhui"></i>
        </div> -->

        <div class="title">{{ $title }}

        </div>
        <div class="search" @click="searchSHow = true">
          <!--<i class="iconfont icon-sousuo"></i> -->
        </div>
      </div>
      <!-- info -->
      <div class="info">
        <!-- <i class="iconfont icon-Word"></i> -->
        <i class="iconfont icon-word"></i>
        <div class="page">{{ $contract['png_count'] }}页</div>
        <!-- <div class="date">2022-05-22 上传</div> -->
      </div>
      <!-- 合同预览图 -->
      <div class="preView">
        <ul>
          <li v-for="(item,index) in defaultPrevie" :key="index" @click="preivewImg(index)">
            <div class="pic" :style="defaultPrevie.length <= 1 ? `background: url(${item}) no-repeat;background-size: contain;height: 13.1622rem;` : '' ">
              <img v-if="defaultPrevie.length > 1" :src="item" alt="">
            </div>
          </li>
          <!--vip -->
          <div class="mask" v-if="!isMore && userInfo?.is_vip === 1">
            <div class="more" @click="isMore = true">点击加载更多<i class="iconfont icon-xiajiantou"></i></div>
            <!--<div class="page">剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>-->
            <div class="page" v-if="contract?.png_count > 1">剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>
            <div class="page" v-else>剩余@{{ contract?.png_count  }}页未读</div>
          </div>
          <!-- 不是vip -->
          <div class="maskNoVip" :style="contract?.png_count === 1 ? 'height:11rem;padding-top: 6.2rem;' : ''" v-else-if="userInfo?.is_vip === 0 || !userInfo">
            <template v-if="!isMore">
              <div class="more" @click="isMore = true">点击加载更多<i class="iconfont icon-xiajiantou"></i></div>
              <!--<div class="page">剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>-->
              <div class="page" v-if="contract?.png_count > 1">剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>
              <div class="page" v-else>剩余@{{ contract?.png_count  }}页未读</div>
            </template>
            <template v-else>
              <!--<div class="page">试读结束，剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>-->
              <div class="page" v-if="contract?.png_count > 1">试读结束，剩余@{{ contract?.png_count - defaultPrevie.length }}页未读</div>
              <div class="page" v-else>试读结束，剩余@{{ contract?.png_count  }}页未读</div>

              <div class="look" @click="clickOpen">请下载或者开通vip后查阅</div>
            </template>
          </div>
        </ul>
      </div>
      <div class="bg">
        <div class="intro">
          <!--@{{ store.getters.nomal.state }} -->
          {{ str_replace('{title}', $contract['title'], $normal['state']) }}
        </div>
      </div>
      <div class="bg">
        <!-- 合同信息 -->
        <div class="word_info">
          <p>
            <span> 类型：Word</span>
            <span>页数：@{{ contract?.png_count }}</span>
          </p>
          <p>
            <span>软件：Microsoft Office / WPS</span>
          </p>
        </div>
        <!-- 链接导航(当前位置) -->
        <ul class="nav_classify">
          @foreach($now_class as $k => $v)
          @if ($v['pid'] == 0)
          <li>
            <a href="/wap/classify/f/{{$v['key']}}?id={{$v['id']}}">{{$v['label']}}</a>
            <i class="iconfont icon-youjiantou"></i>

          </li>
          @elseif($v['is_final'] == 1)
          <li>
            <a href="/wap/classify/s/{{$now_class[0]['key']}}?sidx={{$now_class[1]['key']}}&idx={{$v['key']}}&id={{$v['id']}}">{{$v['label']}}</a>
            <i class="iconfont icon-youjiantou"></i>
          </li>
          @else
          <li>
            <a href="/wap/classify/s/{{$now_class[0]['key']}}?sidx={{$v['key']}}&id={{$v['id']}}">{{$v['label']}}</a>
            <i class="iconfont icon-youjiantou"></i>
          </li>
          @endif
          @endforeach
          <li>
            {{$contract['title']}}
          </li>

        </ul>
      </div>

      <div class="special_box" v-if="specialDetail.length > 0" @click="specialClick(specialDetail[0])">
        <div class="left">
          <div class="title">@{{ specialDetail[0].title }}</div>
          <div class="num">
            <span>合同数量： <i>@{{ specialDetail[0].number }}</i></span>
            <span>下载数量： <i>@{{ specialDetail[0].download }}</i></span>
          </div>
          <div class="time">
            <i class="iconfont icon-shijian"></i>
            <span>@{{ specialDetail[0].created_at }}s</span>
          </div>
        </div>
        <div class="right">
          <div class="pic">
            <!-- v-lazy="specialDetail[0].image" -->
            <img :src="specialDetail[0].image" alt="">
          </div>
        </div>
      </div>

      <div class="footer">

        <!-- 相关搜索 -->
        <div class="correlation_search">
          <div class="title">相关搜索</div>
          <section>
            <ul>
              @foreach($about as $k => $v)
              <li>
                <a :href="`/contractdetail/{{$v['id']}}.html`">{{ $v['title'] }}</a>
              </li>
              @endforeach
            </ul>
          </section>
        </div>

        <!-- 相关推荐 -->
        <div class="sugess">
          <div class="title">猜你想找</div>
          <ul class="word-main">
            <word-item v-for="item in aboutSugessList" :key="item.id" :item="item" @click="clickWordItem" />
          </ul>
        </div>
        <!-- 版权栏 -->
        <div class="copyrightr">
          <!-- <div class="top">
            <span @click="clickServe">联系客服</span>
            <i>|</i>
            <span @click="clickMy">关于我们</span>
          </div> -->
          <!-- <div class="bott">Copyright © @{{ new Date().getFullYear() }} 问合同 - All rights reserved 豫ICP备20024385号</div> -->
          <div class="bott">Copyright ©@{{ new Date().getFullYear() }} 版权所有 智取(浙江)信息科技有限公司浙ICP备2023008636号</div>

        </div>
      </div>

    </div>
    <div class="utils" style="bottom:0;padding-left:15px;padding-right:15px;">
      <div class="left" style="    height: 100%;padding:0;font-size: 0.3243rem ;align-items: center;">
        <div class="home" @click="clickToHome">
          <!--<i class="iconfont icon-shouye"></i>-->
          <svg t="1683943585785" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11938" width="0.50rem" height="0.50rem">
            <path d="M784 912H240a128 128 0 0 1-128-128V419.66a128 128 0 0 1 55.91-105.77l272-185.4a128 128 0 0 1 144.18 0l272 185.4A128 128 0 0 1 912 419.66V784a128 128 0 0 1-128 128z" fill="#FFFFFF" p-id="11939"></path>
            <path d="M784 896H272a112 112 0 0 1-112-112V427.24a112 112 0 0 1 49-92.58l242.63-165.21A112 112 0 0 1 574 167l269.3 168.11a112 112 0 0 1 52.7 95V784a112 112 0 0 1-112 112z" fill="#FFE07A" p-id="11940"></path>
            <path d="M784 928H240c-79.4 0-144-64.6-144-144V419.66a143.91 143.91 0 0 1 62.89-119l272-185.4a144 144 0 0 1 162.22 0l272 185.4a143.91 143.91 0 0 1 62.89 119V784c0 79.4-64.6 144-144 144zM512 122.12a111.8 111.8 0 0 0-63.08 19.59l-272 185.4A111.93 111.93 0 0 0 128 419.66V784a112.12 112.12 0 0 0 112 112h544a112.12 112.12 0 0 0 112-112V419.66a111.93 111.93 0 0 0-48.92-92.55l-272-185.4A111.8 111.8 0 0 0 512 122.12z" fill="#333333" p-id="11941"></path>
            <path d="M256 449m32 0l128 0q32 0 32 32l0 0q0 32-32 32l-128 0q-32 0-32-32l0 0q0-32 32-32Z" fill="#333333" p-id="11942"></path>
            <path d="M432 656h160a64 64 0 0 1 64 64v192H368V720a64 64 0 0 1 64-64z" fill="#FFFFFF" p-id="11943"></path>
            <path d="M464 704h128a48 48 0 0 1 48 48v144H464a48 48 0 0 1-48-48v-96a48 48 0 0 1 48-48z" fill="#FF9580" p-id="11944"></path>
            <path d="M672 928H352V720a80.09 80.09 0 0 1 80-80h160a80.09 80.09 0 0 1 80 80z m-288-32h256V720a48.05 48.05 0 0 0-48-48H432a48.05 48.05 0 0 0-48 48z" fill="#333333" p-id="11945"></path>
          </svg>
          <p style="font-size: 0.3243rem ;">首页</p>
        </div>
        <div class="calssify" @click="clickToClass">
          <!--<i class="iconfont icon-sort"></i>-->
          <svg t="1684290592910" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="48498" width="0.42rem" height="0.5rem">
            <path d="M611.274686 536.818671h125.012567a182.003591 182.003591 0 0 1 182.003591 182.003591v3.67684a182.003591 182.003591 0 0 1-182.003591 182.003591h-3.67684a182.003591 182.003591 0 0 1-182.003591-182.003591v-125.012567a58.829443 58.829443 0 0 1 58.829444-58.829443zM412.725314 487.181329h-125.012567a182.003591 182.003591 0 0 1-182.003591-182.003591v-3.67684a182.003591 182.003591 0 0 1 182.003591-182.003591h3.67684a182.003591 182.003591 0 0 1 182.003591 182.003591v126.850987a58.829443 58.829443 0 0 1-60.667864 58.829444zM471.554758 597.486535v125.012567a182.003591 182.003591 0 0 1-182.003591 182.003591h-3.67684a182.003591 182.003591 0 0 1-182.003591-182.003591v-3.67684a182.003591 182.003591 0 0 1 182.003591-180.16517h126.850987a58.829443 58.829443 0 0 1 58.829444 58.829443zM552.445242 426.513465v-125.012567a182.003591 182.003591 0 0 1 182.003591-182.003591h3.67684a182.003591 182.003591 0 0 1 182.003591 182.003591v3.67684a182.003591 182.003591 0 0 1-182.003591 180.16517h-126.850987a58.829443 58.829443 0 0 1-58.829444-58.829443z" fill="#FFC000" opacity=".4" p-id="48499"></path>
            <path d="M256.459605 73.536804a143.396768 143.396768 0 0 1 143.396768 141.558349v196.710951h-176.48833a139.719928 139.719928 0 0 1-141.558348-141.558348v-55.152603A141.558348 141.558348 0 0 1 223.368043 73.536804h33.091562m0-73.536804h-33.091562A216.933573 216.933573 0 0 0 8.27289 215.095153v55.152603a215.095153 215.095153 0 0 0 215.095153 215.095152h213.256733a34.929982 34.929982 0 0 0 36.768402-34.929982V215.095153A216.933573 216.933573 0 0 0 256.459605 0zM800.631957 73.536804a143.396768 143.396768 0 0 1 143.396768 141.558349v55.152603a141.558348 141.558348 0 0 1-143.396768 141.558348h-174.64991V215.095153A143.396768 143.396768 0 0 1 767.540395 73.536804h33.091562m0-73.536804h-33.091562a216.933573 216.933573 0 0 0-215.095153 215.095153v235.317773a34.929982 34.929982 0 0 0 34.929982 34.929982h213.256733A215.095153 215.095153 0 0 0 1017.56553 270.247756v-55.152603A216.933573 216.933573 0 0 0 800.631957 0zM398.017953 610.355476v196.710951a143.396768 143.396768 0 0 1-143.396768 143.396769h-33.091562A143.396768 143.396768 0 0 1 79.971275 807.066427V753.752244a143.396768 143.396768 0 0 1 141.558348-143.396768h176.48833m36.768402-73.536805H221.529623A216.933573 216.933573 0 0 0 6.43447 753.752244v53.314183a216.933573 216.933573 0 0 0 215.095153 216.933573h33.091562a216.933573 216.933573 0 0 0 216.933573-216.933573V573.587074a36.768402 36.768402 0 0 0-36.768403-36.768403zM800.631957 610.355476A143.396768 143.396768 0 0 1 944.028725 753.752244v53.314183a143.396768 143.396768 0 0 1-143.396768 143.396769h-33.091562a143.396768 143.396768 0 0 1-141.558348-143.396769V610.355476h174.64991m0-73.536805H587.375224a36.768402 36.768402 0 0 0-34.929982 36.768403v233.479353a216.933573 216.933573 0 0 0 215.095153 216.933573h33.091562A216.933573 216.933573 0 0 0 1017.56553 807.066427V753.752244a216.933573 216.933573 0 0 0-216.933573-216.933573z" fill="#FFC000" p-id="48500"></path>
          </svg>
          <p style="font-size: 0.3243rem ;">分类</p>
        </div>
        <div class="search" @click="clickCollect">
          <!--<i class="iconfont icon-sousuo"></i>-->
          <!--<i style="font-size:12px">@{{contract}}</i>-->
          <i :style="isCollect  ? 'color:#fd4f01;font-size:0.4595rem;' : ' color: #ededed;font-size:0.4595rem;'" class="iconfont icon-shoucangpinpaishoucang"></i>

          <p style="font-size: 0.3243rem ;color:#999;margin-top:0.08rem">收藏</p>
        </div>
        <div class="my" @click="clickMe">
          <!--<i class="iconfont icon-wode"></i>-->
          <svg t="1683944753328" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="33824" width="0.5rem" height="0.5rem">
            <path d="M512 558.933333c-128 0-234.666667-106.666667-234.666667-234.666666S384 89.6 512 89.6s234.666667 106.666667 234.666667 234.666667c0 132.266667-106.666667 234.666667-234.666667 234.666666z m0-409.6c-98.133333 0-174.933333 81.066667-174.933333 174.933334s81.066667 174.933333 174.933333 174.933333 174.933333-81.066667 174.933333-174.933333-76.8-174.933333-174.933333-174.933334z" fill="#6A3906" p-id="33825"></path>
            <path d="M512 516.266667c-89.6 0-166.4-72.533333-166.4-166.4S418.133333 183.466667 512 183.466667s166.4 72.533333 166.4 166.4-76.8 166.4-166.4 166.4" fill="#F5CB2B" p-id="33826"></path>
            <path d="M469.333333 366.933333c-17.066667 0-25.6-8.533333-25.6-21.333333v-29.866667c0-12.8 8.533333-21.333333 21.333334-21.333333h4.266666c12.8 0 21.333333 8.533333 21.333334 21.333333V341.333333c4.266667 17.066667-8.533333 25.6-21.333334 25.6zM563.2 366.933333c-17.066667 0-25.6-8.533333-25.6-21.333333v-29.866667c0-12.8 8.533333-21.333333 21.333333-21.333333h4.266667c12.8 0 21.333333 8.533333 21.333333 21.333333V341.333333c0 17.066667-8.533333 25.6-21.333333 25.6zM780.8 930.133333H243.2c-85.333333 0-157.866667-72.533333-157.866667-157.866666s72.533333-157.866667 157.866667-157.866667h537.6c85.333333 0 157.866667 72.533333 157.866667 157.866667 0 89.6-72.533333 157.866667-157.866667 157.866666z m-537.6-256c-55.466667 0-98.133333 42.666667-98.133333 98.133334 0 55.466667 42.666667 98.133333 98.133333 98.133333h537.6c55.466667 0 98.133333-42.666667 98.133333-98.133333 0-55.466667-42.666667-98.133333-98.133333-98.133334H243.2z" fill="#6A3906" p-id="33827"></path>
          </svg>
          <p style="font-size: 0.3243rem ;">我的</p>
        </div>
      </div>
      <!--      <div class="middle">-->
      <!--  <button style="border:none;  background-color: transparent;  transform: translateX(-0.1351rem);" @click="downloadPop = true" v-if="contract.one_pay === 1 && contract.show_one === 1">-->
      <!--  <svg t="1685070958764" class="icon" viewBox="0 0 5020 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14094" width="1.3rem" height="1.3rem"><path d="M1157.7917 778.310499l-37.325378 211.810748H0l37.325378-211.810748h198.024249l23.578046-411.088315H158.701396l38.657028-219.330656h375.956244l-47.234423-101.557927 229.278868-13.786498 54.832664 115.305259h397.340983l-38.657029 219.330656h-92.745534l-141.389941 411.088315h223.051444z m-663.00524 0h187.997705l141.389941-411.088315h-304.517116l-24.87053 411.088315zM1893.724383 627.912335h-283.249875l-30.510461 172.957889 115.696921-16.293135 7.794071-93.998852 172.292064-17.546453-51.307707 290.80895H1255.433008l159.563052-904.89562h579.032932l-100.304609 568.967221z m-169.86376-152.9048l16.371467-92.706368h-86.478944l-16.371467 92.706368h86.478944z m47.547753-269.463377H1684.929432l-19.465596 110.291987h86.478945l19.465595-110.291987z m621.684911 689.364084h-190.504341c30.079633-85.264793 76.961561-299.112182 140.724116-641.698833h-97.758807l-125.527634 711.884643h-229.318034L2050.741633 57.691796h489.969019l-147.617365 837.216446zM3624.909084 1024h-258.222681c57.887627-195.517613 109.74366-418.608223 155.607267-669.27183h-199.277567a1975.934213 1975.934213 0 0 1-37.71704 78.959036l35.837062 52.639357-128.386766 230.649685 120.514363-1.253318 15.235647-121.571849 109.117001-36.346223-52.365194 360.955593h-305.8096l-24.87053-150.398164 159.328055-299.503844-104.142895-48.879403-55.929317 317.089463H2953.52228l96.38799 164.145496-169.589597 87.732262-79.115701-184.237751c-31.685447 75.199082-64.271715 139.118302-97.71964 191.757659h-201.784204c67.757506-95.291337 121.846013-181.770281 162.343852-259.436833h-109.038669l118.673551-673.07095h498.820578l-46.607765 264.450105a2949.997323 2949.997323 0 0 0 73.240773-166.652132 3071.68667 3071.68667 0 0 0 61.099254-161.717193l172.566227 80.251521-24.478868 67.679173h371.021304l-154.432281 876.03014zM2919.056034 676.791738l70.499139-399.808452h-210.55743l-62.548403 354.689003a1862.078103 1862.078103 0 0 0 103.085409-293.27642h121.571849a8235.043641 8235.043641 0 0 1-41.672825 165.477147 2664.397476 2664.397476 0 0 1-46.881928 159.132224l45.354447-22.520558 21.149742 36.307056zM4766.720979 952.521706l-404.66506-214.35655a3844.083075 3844.083075 0 0 1-217.33318 137.90415c-76.413234 45.041117-138.72664 78.489042-186.861886 100.226276l-129.99258-144.131574c59.689271-25.849684 137.003328-68.501664 231.863836-127.838439h-239.383744l27.181335-154.197284h235.62379l-181.06529-46.372768 73.710767-105.278715L4250.197284 469.994263l-56.712641 80.212354h65.172538l45.746108-259.397667h329.622643l-45.746108 259.397667h343.409141l-27.181334 154.197284h-199.277568l206.366648 109.038669-144.875732 139.079136z m28.708816-703.111417H3890.534175l35.837062-203.076688h1094.146644l-90.983056 381.047849h-189.251023l55.145993-177.971161z m-822.881621 117.811895l67.365844-97.758807 243.378696 62.705068-67.130847 96.505489-243.613693-61.45175z" p-id="14095" fill="#fd4f01"></path></svg>-->
      <!--  </button>-->
      <!--</div>-->
      <div class="right">
        <!--<button @click="downloadPop = true" v-if="contract.one_pay === 1 && contract.show_one === 1 && userInfo?.is_vip !== 1">单篇下载</button>-->
        <!--  <button v-else @click="download">立即下载</button>-->

        <button id="singleDownload" @click="downloadPop = true" style="display:none; transform: translateY(-0.0541rem);">单篇下载</button>
        <button id="download_m" style=" transform: translateY(-0.0541rem);" @click="download">立即下载</button>

        <!--<button @click="download">立即下载</button>-->
      </div>
      <!-- <a href="https://htword.oss-cn-shanghai.aliyuncs.com/doc/20221208/63918e8972963.doc?response-content-type=application/octet-stream">test</a> -->

    </div>
    <!-- 搜索弹框 -->
    <!--<searchPopup :searchSHow="searchSHow" @close="searchSHow = $event" />-->
    <search-popup :search-show="searchSHow" @close="searchSHow = $event"></search-popup>
    <!-- 登录弹框 -->
    <!--<login :show="show" @close="show = $event" />-->
    <login-index :show="showLogin" @close="showLogin = $event"></login-index>
    <!-- 开通vip弹框 -->
    <openvip :openvip-s-how="openvipSHow" @close="closeVipDialog"></openvip>
    <!-- 预览确认框 -->
    <van-dialog v-model:show="previewShow" :title="'下载：' +contract?.title" show-cancel-button @confirm="confirm" @close="close">
    </van-dialog>
    <!--核实订单-->
    <pay-cofirm :is-dialog="payCofirmShow" @close="payCofirmShow = $event" @finish="finish" @goon-pay="finish"></pay-cofirm>

    <van-popup v-model:show="downloadPop" round closeable @close="downClose" :style="{ height: '7.5973rem',width:'80%' }" teleport="#app">
      <div class="download_pop_content">
        <div class="title">单篇文档购买</div>
        <div class="con_info">
          <div class="title">
            <svg t="1684997023790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3121" width="0.4rem" height="0.4rem">
              <path d="M535.119473 0h69.599248v95.247413C729.226717 96.331138 853.614299 93.92286 977.881468 96.331138a40.459078 40.459078 0 0 1 44.914393 45.516463c2.047037 234.566322 0 469.614299 1.204139 703.819379-1.204139 24.082785 2.287865 50.694262-11.318909 72.248354-16.978363 12.041392-38.893697 10.837253-58.761994 12.041392h-349.200376V1023.518344h-72.248354C354.980245 990.886171 177.490122 960.541863 0 928.752587V95.488241C178.33302 63.578551 356.786453 32.511759 535.119473 0z" fill="#2A5699" p-id="3122"></path>
              <path d="M604.718721 131.010348H988.598307v761.979304H604.718721v-95.247413h302.479774v-48.165569H604.718721v-59.002822h302.479774v-48.16557H604.718721v-59.002822h302.479774v-48.165569H604.718721v-60.206961h302.479774V428.673565H604.718721v-60.206961h302.479774v-46.96143H604.718721v-59.604892h302.479774V214.336783H604.718721zM240.827846 341.373471c22.156162-1.324553 44.19191-2.287865 66.348071-3.492003 15.533396 80.4365 31.30762 160.632173 48.165569 240.827845 13.125118-82.724365 27.695202-165.087488 41.783632-247.571025 23.239887-0.842897 46.479774-2.167451 69.719661-3.612418-26.370649 115.356538-49.369708 231.796802-78.148636 346.430856-19.386642 10.355597-48.165569 0-71.52587 1.204139C301.034807 596.169332 283.093133 517.779868 269.245532 438.667921c-13.606773 76.944497-31.30762 153.16651-46.841016 229.508937-22.39699-1.204139-44.793979-2.528692-67.311383-4.094073-19.266228-104.760113-42.024459-208.918156-60.206962-313.919097 19.868297-0.963311 39.857008-1.806209 60.206962-2.528693 12.041392 75.860771 25.648166 151.360301 36.124177 227.341487 16.135466-77.907808 32.873001-155.695202 49.610536-233.603011z" fill="#FFFFFF" p-id="3123"></path>
            </svg>
            <span> @{{ contract.title }}</span>
          </div>
          <div class="pay_info">立即支付：<span>@{{ singlePrice / 100 }}</span>元，即可下载</div>
          <div class="timer">
            <span>剩余支付时间： </span>
            <!-- <i>
            <em>00</em> : <em>55</em>  : <em>00</em>
          </i> -->
            <van-count-down millisecond :time="timer" format="HH:mm:ss:SS" ref="countDown">
              <template #default="timeData">
                <span class="block">@{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">@{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">@{{ timeData.seconds }}</span>
                <span class="colon">:</span>
                <span class="block">@{{ TwoText(timeData.milliseconds) }}</span>
              </template>
            </van-count-down>

          </div>
        </div>
        <div class="pay_btn">
          <button @click="weixinPay"> <i class="iconfont icon-weixinzhifu"></i>微信</button>
          <button v-show="envjudge() !== 'wx-mobile' && envjudge() !== 'wx-pc'" @click="zfbPay"><i class="iconfont icon-zhifubaozhifu"></i>支付宝</button>
        </div>
      </div>
    </van-popup>
  </div>

  <script type="module">
    import MyComponent from '/wapdetail/components/test.js'
    // import Header from '/wapdetail/components/header.js'
    import Header from '/waphome/components/header.js'
    import Login from '/waphome/components/login.js?v=1'
    import searchPopup from '/waphome/components/searchPopup.js?v=2023'
    import payCofirm from '/waphome/components/payCofirm.js'
    import OpenVip from '/waphome/components/openvip.js?v=5'
    // import Home from '/wapdetail/components/home.js'
    // import WordItem from '/wapdetail/components/worditem.js'
    import {
      getItem,
      removeItem,
      setItem
    } from '/wapdetail/utils/local.js'
    import {
      envjudge
    } from '/waphome/utils/envjudge.js'

    // 生成时间戳
    let timestamp = Math.floor(Date.now() / 1000)
    const token = '98uu8ru8w0d9kc82ijr8uu8djek9id92'
    let stringToSign = timestamp + '' + timestamp

    // 使用密钥或令牌对请求参数和时间戳进行签名
    let signature = CryptoJS.HmacSHA512(stringToSign, token).toString()

    const render = () => {
      const timer = setTimeout(() => {
        timestamp = Math.floor(Date.now() / 1000)
        stringToSign = timestamp + '' + timestamp
        signature = CryptoJS.HmacSHA512(stringToSign, token).toString()
        // console.log('reder')
        render()
        clearTimeout(timer)
      }, 14000)
    }
    render()

    const {
      ref,
      toRefs,
      reactive,
      computed,
      watch,
      onMounted
    } = Vue

    const {
      createRouter,
      createWebHistory
    } = VueRouter;
    var router = createRouter({
      history: createWebHistory(),
      routes: [],
    });
    console.log(router);

    router.beforeEach((to, from, next) => {
      console.log(to)
      // 有token请求用户信息和下载次数
      if (getItem('TOKEN') || Cookies.get('TOKEN')) {
        service({
          method: 'GET',
          url: '/member/me'
        }).then(res => {
          if (res.code === 200) {
            setItem('userInfo', JSON.stringify(res.data))
            Cookies.set('userInfo', JSON.stringify(res.data), {
              expires: 1
            })
          } else {
            return false
          }
        }).catch(() => {
          return false
        })
        // 下载次数
        service({
          method: 'GET',
          url: '/member/get_day_num'
        }).then(obj => {
          obj.code === 200 ? setItem('downloadNum', obj.count) : false
        })

      }
      // 获取nomal信息
      service({
        method: 'GET',
        url: '/intro/get_normal',
        headers: {
          signature,
          timestamp
        }
      }).then(res => {
        res.code === 200 ? setItem('nomal', JSON.stringify(res.data)) : false
      })
      next()
    });

    /**
     * word组件
     */
    const WordItem = {
      props: {
        item: {
          type: Object
        }
      },
      setup(props, context) {
        // const store = useStore()
        // console.log(props.item)
        const clickWordItem = (item) => {
          // 存取历史
          // store.commit('user/setLookHistory', item)
          let lookHistoryList = getItem('lookHistoryList') ? getItem('lookHistoryList') : []
          const index = lookHistoryList.findIndex(obj => obj.id === item.id)
          if (index !== -1) {
            lookHistoryList.splice(index, 1)
          }
          lookHistoryList.unshift(item)
          setItem('lookHistoryList', lookHistoryList)

          window.location.href = `/contractdetail/${item.id}.html`
          // router.push({
          //   name: 'contractdetail',
          //   params: {
          //     id: item.id + '.html'
          //   }
          // })
        }
        return {
          props,
          clickWordItem
        }
      },
      template: `
      <li class="worditem_li" @click="clickWordItem(item)">
      <div class="pic">
        <img :src="item?.title_pic" alt="">
      </div>
      <div class="text">@{{ item?.title }}</div>
    </li>
      `
    }

    /**
     * 根组件
     */

    Vue.createApp({
        setup() {
          const active = ref(0)

          const classIfyList = reactive([]) // 全部分类
          const isRouterAlive = ref(true)
          const diaLogShow = ref(false)
          const showLogin = ref(false)

          // const data = reactive({
          //   orderNo: getItem('orderNo') || ''
          // })
          const copponShow = ref(false)
          const payCofirmShow = ref(false)
          // const searchSHow = ref(false)

          const userInfo = computed(() => getItem('userInfo'))
          //  const userInfo = ref(getItem('userInfo'))

          const orderNo = computed(() => getItem('orderNo'))
          const href = computed(() => location.href)

          // 详情页开始
          // const router = useRouter()
          const searchSHow = ref(false)
          const data = reactive({
            orderNo: getItem('orderNo') || '',
            contract: {},
            defaultPrevie: [],
            userInfo: {},
            aboutSugessList: [],
            correlationSearchList: [],
            specialDetail: [],
            downloadPop: false,
            timer: (60 * 1000),
            singlePrice: 0,
            payid: '',
            one_pay: false
          })
          const isMore = ref(false)
          // const store = useStore()
          // data.userInfo = store.getters.userInfo
          const show = ref(false)
          const count = ref(0)
          const openvipSHow = ref(false)
          const previewShow = ref(false)
          const path = ref('')
          const isReload = ref(getItem('controReload')) || ref(true)
          const flag = ref(false) // 节流阀

          const countDown = ref(null)
          const isConInfo = ref(getItem('conInfo')) || null

          onMounted(() => {


            setTimeout(() => {
              const singleDownload = document.querySelector('#singleDownload')
              const download_m = document.querySelector('#download_m')

              if (data.contract.one_pay === 1 && data.contract.show_one === 1 && getItem('userInfo')?.is_vip !== 1) {
                singleDownload.style.display = 'block'
                download_m.style.display = 'none'
              } else {
                download_m.style.display = 'block'
                singleDownload.style.display = 'none'
              }

              console.log(singleDownload)
              console.log(download_m)
              // window.eval('{{str_replace('
              //   "', '`', $normal['code'])}}')
              //   // 客服链接
              //   // eslint-disable-next-line no-eval
              //   window.eval('{{str_replace('
              //     "', '`', $normal['wap_service'])}}')
              window.eval(<?php echo json_encode(str_replace('"', '`', $normal['wap_service'])) ?>)
              window.eval(<?php echo json_encode(str_replace('"', '`', $normal['code'])) ?>)
              // 客服链接
              // eslint-disable-next-line no-eval
              // window.eval('{{str_replace('"', '`', $normal['wap_service'])}}')
            }, 500)


            if (!isReload.value) {
              location.reload()
              setItem('controReload', true)
              isReload.value = true
            }
            // 前台环境才计时
            document.addEventListener('visibilitychange', function() {
              if (document.visibilityState === 'hidden') {
                console.log('隐藏')
                countDown.value && countDown.value.pause()
              } else if (document.visibilityState === 'visible') {
                console.log('显示')
                countDown.value && countDown.value.start()
              }
            })
          })

          const TwoText = (num) => {
            return num.toString().slice(0, 2)
          }

          const clickToClass = () => {
            window.location.href = '/wap/classify/f/0?id=1'

          }

          /**
           * 关闭vip弹窗
           */
          const closeVipDialog = () => {
            openvipSHow.value = false;
            // 有订单时不显示等点击 是否支付支付取消了在弹出
            // console.log(getItem('orderNo'));
            if (getItem('orderNo')) return payCofirmShow.value = true
            setTimeout(() => {
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
            }, 500)
          }

          const clickToHome = () => {
            window.location.href = '/'
          }

          const clickMe = () => {
            window.location.href = '/wap/my'
            // console.log('45')
          }
          /**
           * 点击专题
           */
          const specialClick = (item) => {
            window.location.href = '/wap/special-detail?id=' + item.id
          }

          const isCollect = ref(false)

          const downloadFile2 = (url) => {
            const a = document.createElement('a')
            a.href = url.replace('http://', 'https://') + '?response-content-type=application/octet-stream'
            a.click()
            a.remove()
          }
          const queryPath = new URLSearchParams(window.location.search).get('path')

          // 点击收藏
          const clickCollect = async () => {
            const con_id = location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')
            if (!getItem('userInfo')) {
              // eslint-disable-next-line no-return-assign
              return showLogin.value = true
            }
            // 没收藏 去收藏
            if (!isCollect.value) {
              isCollect.value = true
              const res = await service({
                method: 'GET',
                url: '/member/collect',
                params: {
                  contract_id: con_id
                }

              })
              if (res.code === 200) {
                vant.Toast.success('收藏成功')
              }
            } else {
              isCollect.value = false
              const res = await service({
                method: 'GET',
                url: '/member/un_collect',
                params: {
                  contract_id: con_id
                }

              })
              if (res.code === 200) {
                vant.Toast.success('取消成功')
              }
            }
          }

          // false 清楚
          watch(() => data.downloadPop, (bol) => {
            if (!bol) {
              setTimeout(() => {
                countDown.value && countDown.value.reset()
              }, 300)
            } else {
              // 获取单篇价格
              service({
                method: 'GET',
                url: '/order_type/list',
                params: {
                  type: 4
                },
                headers: {
                  signature,
                  timestamp
                }
              }).then(res => {
                data.singlePrice = res.data[0].price
                data.payid = res.data[0].id
              })
            }
          }, {
            immediate: true
          })

          // 支付宝单篇支付
          const zfbPay = async () => {
            data.downloadPop = false
            removeItem('conInfo')
            const con_id = location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')
            const res = await service({
              method: 'POST',
              url: '/alipay/wap_pay',
              data: {
                payid: data.payid,
                // return_url: '/wap' + router.currentRoute.value.fullPath,
                return_url: '/',
                contract_id: con_id,

                keyword: Cookies.get('keyword') || '',
                bd_vid: Cookies.get('bdVid') || '',
                keywordid: Cookies.get('a_keywordid') ?? '',
                unitid: Cookies.get('a_unitid') ?? '',
                userid: Cookies.get('a_user') ?? '',
                planid: Cookies.get('a_planid') ?? ''
              }
            })
            if (res.code === 200) {
              // store.commit('user/setOrderNo', res?.order_no)
              setItem('orderNo', res?.order_no)
              window.location.href = res.url
            }
          }

          // 微信单篇支付
          const weixinPay = async () => {
            data.downloadPop = false
            removeItem('conInfo')
            const con_id = location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')
            const res = await service({
              method: 'POST',
              url: '/wxpay/wap_pay',
              data: {
                payid: data.payid,
                // return_url: '/wap' + router.currentRoute.value.fullPath,
                contract_id: con_id,

                keyword: Cookies.get('keyword') || '',
                bd_vid: Cookies.get('bdVid') || '',
                keywordid: Cookies.get('a_keywordid') ?? '',
                unitid: Cookies.get('a_unitid') ?? '',
                userid: Cookies.get('a_user') ?? '',
                planid: Cookies.get('a_planid') ?? ''
              }
            })
            if (res.code === 200) {
              data.orderNo = res.order.out_trade_no
              setItem('orderNo', res?.order?.out_trade_no)
            }
            if (envjudge() !== 'wx-mobile' && envjudge() !== 'wx-pc') {
              if (res.code === 200) {

                //   store.commit('user/setOrderNo', res?.order?.out_trade_no)

                window.location = res.data.h5_url + `&redirect_url=${window.encodeURIComponent('https://m.wenhetong.com' + router.currentRoute.value.fullPath)}`
              }
            } else if ((envjudge() === 'wx-mobile' || envjudge() === 'wx-pc')) {

              // jsApI 支付
              // 获取code
              setTimeout(() => {
                // alert(getItem('orderNo'))
                payCofirmShow.value = true
              }, 2200)
              const info = JSON.stringify({
                payid: data.payid,
                contract_id: con_id,

                keyword: Cookies.get('keyword') || '',
                bd_vid: Cookies.get('bdVid') || '',
                keywordid: Cookies.get('a_keywordid') ?? '',
                unitid: Cookies.get('a_unitid') ?? '',
                userid: Cookies.get('a_user') ?? '',
                planid: Cookies.get('a_planid') ?? ''
              })
              window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbb2bda0148fea6f3&redirect_uri=${window.encodeURIComponent('https://m.wenhetong.com/wap/pay')}?info=${info}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
            } else if (envjudge() === 'wx-mobile' && envjudge() === 'iOS') {

              // jsApI 支付
              // 获取code
              setTimeout(() => {
                payCofirmShow.value = true
              }, 2200)
              const info = JSON.stringify({
                payid: data.payid,
                contract_id: con_id,

                keyword: Cookies.get('keyword') || '',
                bd_vid: Cookies.get('bdVid') || '',
                keywordid: Cookies.get('a_keywordid') ?? '',
                unitid: Cookies.get('a_unitid') ?? '',
                userid: Cookies.get('a_user') ?? '',
                planid: Cookies.get('a_planid') ?? ''
              })
              window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbb2bda0148fea6f3&redirect_uri=${window.encodeURIComponent('https://m.wenhetong.com/wap/pay')}?info=${info}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
            }
          }

          // 获取合同详情
          const getContractDetails = async (cid) => {
            // Toast.loading('加载中')
            const res = await service({
              method: 'GET',
              url: '/detail/get_png',
              params: {
                contract_id: cid
              }
            })
            // data.contract = {!! $data !!}
            data.contract = <?php $data ?>
            data.contract = res.data
            isCollect.value = res.data.is_collect
            data.one_pay = res.data.one_pay

            const result = await service({
              url: '/detail/get_special',
              params: {
                contract_id: cid
              }
            })

            data.specialDetail = result.data
            // console.log(data.specialDetail[0].title)

            // 单篇下载 弹出窗口
            if (isConInfo.value) {
              // TODO 并且支持单篇付费
              if (res.data.one_pay === 1 && !getItem('orderNo')) {
                if (getItem('userInfo') && getItem('userInfo')?.is_vip == 1) {
                  removeItem('conInfo')
                  console.log('vip no single');
                } else {
                  // TAG 弹窗需要注释
                  // data.downloadPop = true
                  removeItem('conInfo')
                }
              }
            }
            if (queryPath) {
              // 使用方法
              if (envjudge() === 'wx-mobile') {
                // 打开确认弹框
                router.push({
                  name: 'preview',
                  query: {
                    path: queryPath
                  }
                })
                // getDownPaths()
              } else {
                downloadFile2(queryPath)
              }
            }
            // isCollect.value =  data.contract.is_collect
            //   console.log(data.contract)
            //   data.contract = {
            //     "id": 38354,
            //     "title": "离婚协议范本及使用注意事项",
            //     "png": [
            //       "http://htword.oss-cn-shanghai.aliyuncs.com/img/20221209/63930f733cc27.jpg",
            //       "http://htword.oss-cn-shanghai.aliyuncs.com/img/20221209/63930f740955e.jpg",
            //       "http://htword.oss-cn-shanghai.aliyuncs.com/img/20221209/63930f7461836.jpg",
            //       "http://htword.oss-cn-shanghai.aliyuncs.com/img/20221209/63930f7575aa6.jpg",
            //       "http://htword.oss-cn-shanghai.aliyuncs.com/img/20221209/63930f765184f.jpg"
            //     ],
            //     "png_count": 10,
            //     "meta": "问合同提供优质的离婚协议范本及使用注意事项下载，格式多样，可编辑，可替换，下载即用，更多离婚协议范本及使用注意事项资料，快来搜合同下载",
            //     "prev": {
            //       "id": 38353,
            //       "title": "有债务离婚协议书范本"
            //     },
            //     "next": {
            //       "id": 38355,
            //       "title": "离婚协议范本"
            //     }
            //   }
            // store.commit('user/setContactDetail', res.data)
            // Toast.clear()
            getAboutContracts()
            getCorrelationSearch()
            // 默认展示一半
            data.defaultPrevie = computed({
              get() {
                if (!isMore.value) {
                  return data.contract?.png.filter((item, index) => index <= parseInt(data.contract?.png.length / 2) ? item : false)
                } else {
                  return data.contract?.png.map(item => item)
                }
              }
            })
          }

          // 点击图片预览
          const preivewImg = (index) => {
            if (data.contract.png_count <= 1) return
            vant.ImagePreview({
              images: [
                ...data.defaultPrevie
              ],
              startPosition: index
            })
          }

          // 获取相关推荐合同
          const getAboutContracts = async () => {
            const res = await service({
              method: 'GET',
              url: '/detail/about',
              params: {
                limit: 50,
                rand: 10,
                keyword: data.contract?.title
              },
              headers: {
                signature,
                timestamp
              }
            })
            data.aboutSugessList = res.data
            //   data.aboutSugessList = [

          }

          // 获取相关搜索
          const getCorrelationSearch = async () => {
            // const res = await getAboutContract({ limit: 100, rand: 10, keyword: data.contract?.title })
            // data.correlationSearchList = res.data
            data.correlationSearchList = []
          }

          // 获取用户当天下载次数
          const getDayNums = async () => {
            const res = await getDayNum()
            count.value = res.count
          }

          // 文档下载
          const getDownPaths = async () => {
            const con_id = location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')
            const res = await service({
              method: 'GET',
              url: '/member/get_down_path',
              params: {
                contract_id: con_id
              }
            })
            const a = document.createElement('a')
            a.href = res.path.replace('http://', 'https://') + '?response-content-type=application/octet-stream'
            // a.href = 'https://htword.oss-cn-shanghai.aliyuncs.com/doc/20221208/63918e8972963.doc'
            // a.download = '文档'
            // // a.setAttribute('download', data.contract?.title)
            // // document.body.appendChild(a)
            a.click()
            a.remove()
            // document.body.removeChild(a)
          }
          // 获取文档链接
          const getDown = async () => {
            const con_id = location.href.split('contractdetail/')[1].split('?')[0].replace('.html', '')
            const res = await service({
              method: 'GET',
              url: '/member/get_down_path',
              params: {
                contract_id: con_id
              }
            })
            path.value = res.path
          }
          // console.log('11111111111111111' + navigator.userAgent.toLowerCase())
          // 点击下载
          const download = async () => {

            // console.log(userInfo.value.mobile)
            // if (flag.value) {
            //   console.log('请等待1s后再次点击 >>>>>>>>>')
            //   return false
            // }
            // flag.value = true
            // setTimeout(() => {
            //   flag.value = false
            // }, 1000)
            // console.log('do something >>>>>>>>>')
            // console.log(userInfo.value)
            console.log(getItem('userInfo'))
            //   有用户信息 每次下载更新登录态 防止返回历史页面 更新不及时
            if (getItem('userInfo')) {
              vant.Toast.loading()
              // TODO
              const res = await service({
                method: 'GET',
                url: '/member/me',
                headers: {
                  Authorization: `Bearer ${getItem('TOKEN') || Cookies.get('TOKEN')}`
                }
              })
              if (res.code === 200) {
                //   getItem('userInfo') = res.data
                setItem('userInfo', JSON.stringify(res.data))
              }
            }

            if (!getItem('userInfo')) {
              console.log('login')
              // 没有登录 打开登录框
              showLogin.value = true
            } else if (getItem('userInfo').is_vip === 0) {
              // TODO 校验订单 有订单去支付..
              const res = await service({
                method: 'GET',
                url: '/member/check_order'
              })
              vant.Toast.clear()
              // console.log(res)
              if (res.count >= 1) {
                vant.Dialog.confirm({
                  message: '您当前还有未支付的订单是否去支付'
                }).then(() => {
                  // on close
                  // router.push({
                  //   name: 'order'
                  // })
                  window.location.href = '/wap/order'
                }).catch(() => {})
              } else {
                // 已登录 不是vip 打开vip弹框 并且无订单
                //   openvipSHow.value = true
                if (data.contract.one_pay === 1) {
                  setItem('conInfo', {
                    title: data.contract.title,
                    id: data.contract.id
                  })
                  setTimeout(() => {
                    // TAG 弹窗需要注释
                    // data.downloadPop = true
                  }, 1500)
                }
                // window.location.href = '/wap/openvip'
                openvipSHow.value = true
              }
              // 有订单去订单页
            } else if (getItem('userInfo').is_vip === 1) {
              // 检查用户当天下载次数
              const res2 = await service({
                method: 'GET',
                url: '/member/get_day_num'
              })
              if (+res2.count >= 1) {
                // 有次数 去下载
                // TODO 去预览如果是手机端微信环境去预览 并且不是百度app
                if (envjudge() === 'wx-mobile') {
                  // 打开确认弹框
                  previewShow.value = true
                  // getDownPaths()
                } else if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') !== -1 && envjudge() === 'iOS') {
                  // previewShow.value = true
                  if (flag.value) {
                    console.log('请等待1s后再次点击 >>>>>>>>>')
                    return false
                  }
                  flag.value = true
                  setTimeout(() => {
                    flag.value = false
                  }, 1000)
                  getDownPaths()
                } else {
                  if (flag.value) {
                    console.log('请等待1s后再次点击 >>>>>>>>>')
                    return false
                  }
                  flag.value = true
                  setTimeout(() => {
                    flag.value = false
                  }, 1000)
                  getDownPaths()
                }
              } else {
                // 提示用户没次数了
                vant.Toast.fail('您当日下载次数已用完')
              }
            }
          }

          // 点击请下载
          const clickOpen = () => {
            if (!getItem('userInfo')) {
              // 没有登录 打开登录框
              showLogin.value = true
            } else if (getItem('userInfo').is_vip === 0) {
              // 已登录 不是vip 打开vip弹框
              openvipSHow.value = true
              // window.location.href = 'https://m.wenhetong.com/wap/openvip'
            }
          }

          // 点击预览确认
          const confirm = async () => {
            await getDown()
            // 你的文档地址
            // const file = path.value
            // // XDOC文档预览服务地址
            // let xurl = 'https://view.xdocin.com/view?src='
            // // 传入文档地址
            // xurl += encodeURIComponent(file) + '&toolbar=false'
            // // 开始预览
            // // window.open(xurl)
            // window.location.href = xurl
            window.location.href = '/wap/preview?path=' + path.value
            //   router.push({
            //     name: 'preview',
            //     query: {
            //       path: path.value
            //     }
            //   })
          }

          // 关闭预览确认
          const close = () => {
            previewShow.value = false
          }

          // 点击wordItem 滚动到头部
          const clickWordItem = () => {
            setTimeout(() => {
              document.body.scrollTop = document.documentElement.scrollTop = 0
            }, 1000)
          }

          watch(() => router.currentRoute.value.params, async (val) => {
            const con_id = location.href.split('contractdetail/')[1] ? location.href.split('contractdetail/')[1].replace('.html', '') : '38354'
            await getContractDetails(con_id)
            // store.commit('user/setCurrentName', data.contract?.title)
            //   document.title = data.contract?.title + ' - 问合同'
          }, {
            immediate: false
          })

          // 点击联系客服
          const clickServe = () => {
            window.location.href = store.getters.nomal.wap_url
          }
          // 点击关于我们
          const clickMy = () => {
            window.location.href = 'https://www.wenhetong.com/helpCenter?type=5'
          }
          // 详情页结束


          // 未支付 点击跳转订单页去支付
          const goonPay2 = async () => {
            console.log('20230808')
            // clearInterval(timer)
            const result = await service({
              method: 'GET',
              url: '/wxpay/check_status',
              params: {
                order_no: getItem('orderNo')
              }
            })
            //   store.commit('user/removeOrderNo')
            removeItem('orderNo')
            if (result.status === 1) {
              // 已支付
              vant.Toast.success('支付成功')
              // store.commit('user/removeOrderNo')
              removeItem('orderNo')
              if (location.href.includes('contractdetail')) {
                setTimeout(() => {
                  // location.reload()
                  // window.location.href = 'https://m.wenhetong.com/wap/my'
                  vant.Dialog.confirm({
                      title: '单篇文档',
                      message: '恭喜您，单篇文档购买成功！如没有自动下载请点击下载按钮',
                      theme: 'round-button',
                      confirmButtonText: '下载',
                      className: 'downloadBox'
                    })
                    .then(() => {
                      // on confirm
                      if (envjudge() === 'wx-mobile' || envjudge() === 'wx-pc') {
                        removeItem('orderNo')
                        window.location.href = '/preview?path=' + result.data.path

                      } else {
                        const a = document.createElement('a')
                        a.href = result.data.path.replace('http://', 'https://') + '?response-content-type=application/octet-stream'
                        a.click()
                        a.remove()
                      }
                    })
                    .catch(() => {
                      // on cancel
                    })
                }, 1000)
              } else {
                setTimeout(() => {
                  // location.reload()
                  window.location.href = 'https://m.wenhetong.com/wap/my'
                }, 1000)
              }
              // setTimeout(() => {
              //   location.reload()
              // }, 1000)
            } else if (result.status === 0) {
              // store.commit('user/removeOrderNo')
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              // data.downloadPop = true
              removeItem('conInfo')
              vant.Toast.fail('支付取消')
              removeItem('orderNo')
              // 未支付
              const res = await service({
                method: 'GET',
                url: '/order/send_coupon'
              })
              if (res.code === 200) {
                // 弹出优惠券弹框
                copponShow.value = true
              } else {
                vant.Toast('稍后进入订单页核实订单状态,请不要发起重复支付')
              }
            } else if (result.status === 2) {
              // data.downloadPop = true
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              removeItem('conInfo')
              vant.Toast.fail('支付取消')
            } else {
              // data.downloadPop = true
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              removeItem('conInfo')
              vant.Toast('稍后进入订单页核实订单状态,请不要发起重复支付')
              setTimeout(() => {
                location.reload()
              }, 800)
            }
          }

          // 点击已完成
          const finish = async () => {
            // clearInterval(timer)
            const result = await service({
              method: 'GET',
              url: '/wxpay/check_status',
              params: {
                order_no: getItem('orderNo')
              }
            })
            //   store.commit('user/removeOrderNo')
            removeItem('orderNo')
            Cookies.remove('orderNo')
            if (result.status === 1) {
              // 已支付
              vant.Toast.success('支付成功')
              // store.commit('user/removeOrderNo')
              removeItem('orderNo')
              if (location.href.includes('contractdetail') && result.data) {
                setTimeout(() => {
                  // location.reload()
                  // window.location.href = 'https://m.wenhetong.com/wap/my'
                  vant.Dialog.confirm({
                      title: '单篇文档',
                      message: '恭喜您，单篇文档购买成功！如没有自动下载请点击下载按钮',
                      theme: 'round-button',
                      confirmButtonText: '下载',
                      className: 'downloadBox'
                    })
                    .then(() => {
                      // on confirm
                      if (envjudge() === 'wx-mobile' || envjudge() === 'wx-pc') {
                        removeItem('orderNo')
                        window.location.href = '/wap/preview?path=' + result.data.path

                      } else {
                        const a = document.createElement('a')
                        a.href = result.data.path.replace('http://', 'https://') + '?response-content-type=application/octet-stream'
                        a.click()
                        a.remove()
                      }
                    })
                    .catch(() => {
                      // on cancel
                    })
                }, 1000)
              } else {
                setTimeout(() => {
                  // location.reload()
                  window.location.href = 'https://m.wenhetong.com/wap/my'
                }, 1000)
              }
            } else if (result.status === 0) {
              // store.commit('user/removeOrderNo')
              // data.downloadPop = true
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              removeItem('conInfo')
              removeItem('orderNo')
              // 未支付
              vant.Toast.fail('支付取消')
              if (getItem('userInfo')) {
                const res = await service({
                  method: 'GET',
                  url: '/order/send_coupon'
                })
                if (res.code === 200) {
                  // 弹出优惠券弹框
                  copponShow.value = true
                } else {
                  vant.Toast.clear()
                  //   vant.Toast('稍后进入订单页核实订单状态,请不要发起重复支付')
                }
              }
            } else if (result.status === 2) {
              // data.downloadPop = true
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              removeItem('conInfo')
              vant.Toast.fail('支付取消')
            } else {
              vant.Toast('稍后进入订单页核实订单状态,请不要发起重复支付')
              // data.downloadPop = true
              // 支持单篇弹出
              if (data.one_pay === 1) {
                data.downloadPop = true
              }
              removeItem('conInfo')
              setTimeout(() => {
                location.reload()
              }, 800)
            }
          }

          watch(() => orderNo.value, (val) => {
            console.log(val)
            if (location.href.includes('/pay')) {
              return false
            } else {
              if (val && val.length) {
                // timer = setInterval(() => {
                //   time.value--
                //   chexkStatuss(data.orderNo)
                // }, 1200)
                setTimeout(() => {
                  payCofirmShow.value = true
                }, 2200)
                // checkOrders()
              } else {
                // clearInterval(timer)
              }
            }
          }, {
            immediate: true
          })

          watch(href, (val) => {
            console.log(val);
            if (val.includes('/')) {
              active.value = 2
            } else if (val.includes('classify')) {
              active.value = 1
              // getClassifyAll()
            } else if (val.includes('my')) {
              active.value = 2
            }
          }, {
            immediate: true
          })



          onMounted(() => {

            window.onload = function() {
              document.addEventListener('touchstart', function(event) {
                if (event.touches.length > 1) {
                  event.preventDefault()
                }
              })
              let lastTouchEnd = 0
              document.addEventListener('touchend', function(event) {
                const now = (new Date()).getTime()
                if (now - lastTouchEnd <= 300) {
                  event.preventDefault()
                }
                lastTouchEnd = now
              }, false)

              // 阻止双指放大
              document.addEventListener('gesturestart', function(event) {
                event.preventDefault()
              })
            }
          })


          return {
            active,
            classIfyList,
            searchSHow,
            isRouterAlive,
            showLogin,
            goonPay2,
            finish,
            diaLogShow,
            copponShow,
            ...toRefs(data),
            payCofirmShow,
            userInfo,
            // 详情页数据
            // ...toRefs(data),
            isMore,
            searchSHow,
            download,
            show,
            openvipSHow,
            // store,
            previewShow,
            confirm,
            close,
            preivewImg,
            clickOpen,
            clickWordItem,
            clickServe,
            clickMy,
            clickMe,
            clickToHome,
            clickToClass,
            isCollect,
            clickCollect,
            envjudge,
            TwoText,
            countDown,
            zfbPay,
            weixinPay,
            specialClick,
            closeVipDialog
            // clickLook,
            // classIfyList,
            // openvipSHow,
            // show,
          }
        },
        mounted() {
          console.log(this.count) // 0
        }
      })
      .use(router)
      .use(vant)
      .use(ElementPlus)
      .component('my-component', MyComponent)
      .component('search-popup', searchPopup)
      .component('header-index', Header)
      .component('login-index', Login)
      .component('pay-cofirm', payCofirm)
      .component('openvip', OpenVip)
      // .component('home-index', Home)
      .component('word-item', WordItem)
      .mount('#app')
  </script>
</body>

</html>